<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // Proxy 内置Api可以直接使用
    const obj = {
      name: 'jack',
      food: '西兰花炒蛋'
    }


    // 1. 属性取值 和 赋值 时,如果属性不存在,报错
    // 2. 修改name时,只能设置字符串,否则报错
    const p = new Proxy(obj, {
      // target:源对象
      // key:属性名
      get(target, key) {
        if (target[key] === undefined) {
          // 对象没有这个属性
          throw new Error('属性不存在')
        }
        // 属性存在
        return target[key]
      },
      // target:源对象
      // key:属性名
      // value:设置的值
      set(target, key, value) {
        if (target[key] === undefined) {
          throw new Error('属性不存在')
        }
        // 属性存在
        if (key === 'name') {
          if (typeof value !== "string") {
            // 报错
            throw new Error('name只能设置字符串')
          }
          // 类型符合要求 赋值
          target[key] = value
        }
      }
    })





    // ------------- Proxy基本使用 -------------
    // 需要通过实例化创建Proxy
    // 最大的特点就是,无论操纵的属性,在对象上是否存在
    // 都会触发 get set
    // const p = new Proxy(obj, {
    //   // target:源对象
    //   // key:属性名
    //   get(target, key) {
    //     console.log('get触发')
    //     console.log('target:', target)
    //     console.log('key:', key)
    //   },
    //   // target:源对象
    //   // key:属性名
    //   // value:设置的值
    //   set(target, key, value) {
    //     console.log('set触发')
    //     console.log('target:', target)
    //     console.log('key:', key)
    //     console.log('value:', value)
    //   }
    // })

    // 通过代理来操纵对象

  </script>
</body>

</html>